<?php /*a:5:{s:82:"D:\English\XAMPP-PHP5\htdocs\tp5\application\index\view\index\user_travel_map.html";i:1587116493;s:67:"D:\English\XAMPP-PHP5\htdocs\tp5\application\index\view\layout.html";i:1590217625;s:74:"D:\English\XAMPP-PHP5\htdocs\tp5\application\index\view\public\header.html";i:1589556016;s:73:"D:\English\XAMPP-PHP5\htdocs\tp5\application\index\view\public\float.html";i:1587203341;s:74:"D:\English\XAMPP-PHP5\htdocs\tp5\application\index\view\public\footer.html";i:1588948031;}*/ ?>
<div>
    <div class="my_container">
        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/homePage.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/tooltip.css" />
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui@2.12.0/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>


</head>

<body>
    <div class="top">
        <div class="name">
            <a style="text-decoration: none;" href="<?php echo url('index/getHomePage'); ?>">
                <img src="http://localhost/tp5/public/img/header/logo.png" style="width:8em">
                <!--火花设计思维分享-->
            </a>
        </div>
        <?php if(!isset($_COOKIE['user'])): ?>
        <div class="login" style="margin-left: 50%;"><a href="<?php echo url('index/login'); ?>" style="font-size: 20px;">登录</a></div>
        <div class="register"><a href="<?php echo url('index/register'); ?>" style="font-size: 20px;">注册</a></div>

        <?php else: ?>

        <!--添加成员的消息通知-->
        <div onclick="window.location.href='<?php echo url('index/showPrjMemRequests'); ?>'" class="request_banner" style="display: none;"></div>


        <div class="login"><a id="header_projects" href="<?php echo url('index/getProjects',array('userId'=>$_COOKIE['user'])); ?>" style="font-size: 20px;">项目小组</a></div>


        <div class="register"><a id="header_methods" href="<?php echo url('index/getDesignMethods'); ?>" style="font-size: 20px;">设计方法</a></div>
        <div class="register"><a id="header_cases" href="<?php echo url('index/getPublicCanvasLists'); ?>" style="font-size: 20px;">创意社区</a></div>
        <div class="register"><a id="header_ques" href="<?php echo url('index/getSingleQuesBank'); ?>" style="font-size: 20px;">题库练习</a></div>


        <div class="welcome_banner" style="z-index:105;" onmouseover="$('#logout').show()" onmouseout="$('#logout').hide()">
            <svg style="margin-left:65px;" t="1573030732563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2246" width="40" height="40">
                <path d="M512 950.857143c241.371429 0 438.857143-197.485714 438.857143-438.857143s-197.485714-438.857143-438.857143-438.857143-438.857143 197.485714-438.857143 438.857143 197.485714 438.857143 438.857143 438.857143z m0 73.142857c-285.257143 0-512-226.742857-512-512s226.742857-512 512-512 512 226.742857 512 512-226.742857 512-512 512z" fill="#e45440" p-id="2247">

                </path>
                <text x="50%" y="65%" style="fill:#e45440;font-size:550px;text-anchor: middle;">
                    <?php echo iconv_substr($_COOKIE['username'],0,1); ?>
                </text>
            </svg>


            <div id="logout">
                <div class="logout_top">
                    <text class="logout_user"><?php echo htmlentities($_COOKIE['username']); ?></text>
                    <br>
                    <text class="logout_id">ID: <?php echo htmlentities($_COOKIE['user']); ?></text>
                </div>

                <div class="logout_option">
                    <a href="<?php echo url('index/showPrjMemRequests'); ?>">我的消息</a>
                </div>

                <div class="logout_option">
                    <a href="<?php echo url('index/logout'); ?>">登出</a>
                </div>

                <div style="height: 6px;width: 100%;border-radius: 4px;"></div>
            </div>

            <svg style="float: right;margin-right: 30px;" t="1573118997341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" width="15" height="40"><path d="M972.838375 233.161725c15.319322 15.477939 27.804007 28.100774 43.005646 43.46103-167.688762 171.229501-334.75329 341.814301-503.593304 514.220637C343.610253 619.265957 176.069875 448.809074 8.155979 277.978674c15.140239-13.528486 28.904092-25.828971 36.456303-32.582981C102.486983 299.970139 164.429441 355.920971 223.562844 414.706441c90.002299 89.475281 178.423545 180.552081 266.599191 271.833548 16.09194 16.659891 25.511737 17.96976 42.483746 0.450267 139.874522-144.366961 280.757028-287.756638 421.235317-431.540299C960.33834 248.844331 965.900165 241.36887 972.838375 233.161725z" p-id="2176"></path></svg>

        </div>
        <?php endif; ?>
    </div>
    <!--
<?php if(!isset($_COOKIE['user'])): ?>
<a href="<?php echo url('index/login'); ?>">登录</a>
<?php else: ?><a href="<?php echo url('index/logout'); ?>">登出</a>
<a href="<?php echo url('index/getProjects',array('userId'=>$_COOKIE['user'])); ?>">项目</a>
<?php endif; ?>-->

    <script>
        $.ajax({
            type: "GET",
            url: "http://localhost/tp5/public/index.php/index/index/getPrjMemRequests",
            data: {},
            xhrFields: {
                withCredentials: true
            },
            //crossDomain: true,
            success: function(result) {
                if (result != null && (result.request_list.length > 0 || result.reject_list.length > 0)) {
                    $(".request_banner").show();
                    $(".request_banner").html("<a style='cursor: pointer;'>-您有" + (result.request_list.length + result.reject_list.length) + "条消息-</a>");
                }
            }
        });

        /*$.get('http://localhost/tp5/public/index.php/index/index/getPrjMemRequests',{},function (result) {
            if(result != null && ( result.request_list.length > 0 || result.reject_list.length > 0) ) {
                $(".request_banner").show();
                $(".request_banner").html("<a>-您有" + ( result.request_list.length + result.reject_list.length ) + "条消息-</a>");
            }
            //$(".request_banner").load(location.href + " .request_banner");
        });*/
    </script>
</body>

</html> <style>
    .singleEle{

    }
</style>


<div id="big" style="height:500px;width: 100%;position: relative;">

    <button style="z-index: 2;position: absolute;" onclick="addEleNode()">＋</button>
    <button style="z-index: 2;position: absolute;right:50%;" onclick="editMapCoordinates()">保存布局</button>

    <?php if(is_array($nodes) || $nodes instanceof \think\Collection || $nodes instanceof \think\Paginator): $i = 0; $__LIST__ = $nodes;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$n): $mod = ($i % 2 );++$i;?>
    <div style="z-index:2;position: absolute;left:<?php echo htmlentities($n['idx_left']); ?>px;top:<?php echo htmlentities($n['idx_top']); ?>px;" class="singleEle"
         id="node_<?php echo htmlentities($n['id']); ?>" onmousedown="small_down(event,this)"
        onclick="$('#del_node').css('left',(parseInt($(this).css('left')) - 10));
                       $('#del_node').css('top',(parseInt($(this).css('top'))));

                       $('#del_node').show();

                        delNodeId = $(this).attr('id');">
        <button  onclick="endLink(this)">→</button>

        <textarea class="contentEle" oninput="editMapRecord('<?php echo htmlentities($n['id']); ?>',this)"><?php echo htmlentities($n['contents']); ?></textarea>

        <button   onclick="beginLink(this)">→</button>
    </div>
    <?php endforeach; endif; else: echo "" ;endif; ?>

    <!--删除节点-->
    <button onclick="delMapNode()" id="del_node" style="z-index:3;display:none;position: absolute;left:0;top:0;">删除</button>



    <svg id="blank_board" style="z-index:1;width:100%;height:100%;position: absolute;left:0px;top:0px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line id="tmpLine" x1="0" y1="0" x2="0" y2="0" class="singleLine"
          onclick="$('#del_link').css('left',(parseInt($(this).attr('x1')) + parseInt($(this).attr('x2')))/2);
                       $('#del_link').css('top',(parseInt($(this).attr('y1')) + parseInt($(this).attr('y2')))/2);

                       $('#del_link').show();

                        delLinkId = $(this).attr('id');"
          style="stroke:rgb(255,0,0);stroke-width:5" />

    <?php if(is_array($links) || $links instanceof \think\Collection || $links instanceof \think\Paginator): $i = 0; $__LIST__ = $links;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$li): $mod = ($i % 2 );++$i;?>
    <line id="line_<?php echo htmlentities($li['src_id']); ?>_<?php echo htmlentities($li['tar_id']); ?>" x1="0" y1="0" x2="0" y2="0"
          onclick="$('#del_link').css('left',(parseInt($(this).attr('x1')) + parseInt($(this).attr('x2')))/2);
                       $('#del_link').css('top',(parseInt($(this).attr('y1')) + parseInt($(this).attr('y2')))/2);

                       $('#del_link').show();

                        delLinkId = $(this).attr('id');"

          style="stroke:rgb(255,0,0);stroke-width:5" class="singleLine"/>

    <?php endforeach; endif; else: echo "" ;endif; ?>


</svg>

    <!--删除连线-->
    <button onclick="delMapLink()" id="del_link" style="z-index:3;display:none;position: absolute;left:0;top:0;">删除</button>
</div>

<script>
    //console.log( 0.5 * parseInt($('#ni').css('height')));


    var startEleId = "",delLinkId = "",delNodeId = "";

    function addEleNode() {
        $.ajax({
            type: "POST",
            url: "http://localhost/tp5/public/index.php/index/index/addMapNode",
            data: {
                toolId: '<?php echo htmlentities($toolId); ?>'
            },
            success: function (result) {
                //console.log(result);
                //var newId = $('.singleEle').length + 1 ;
                var newId = result ;

                $('#big').append('<div style="z-index:2;position: absolute;left:0px;top:20px;" \
                onclick="$(\'#del_node\').css(\'left\',(parseInt($(this).css(\'left\')) - 10));\
                $(\'#del_node\').css(\'top\',(parseInt($(this).css(\'top\'))));\
                $(\'#del_node\').show();\
                delNodeId = $(this).attr(\'id\');"\
                    class="singleEle" id="node_' + newId + '" onmousedown="small_down(event,this)">\
            <button  onclick="endLink(this)">→</button>\
            <textarea class="contentEle" oninput="editMapRecord(' + newId + ',this)"></textarea>\
            <button   onclick="beginLink(this)">→</button>\
            </div>');
            }
        });


    }


    function beginLink(ele) {
        //$('#blank_board').append('<line id="tmpLine" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" />');

        document.onmousemove = function (e) {


            srcEle = $(ele).parents('.singleEle');

            $('#tmpLine').attr('x1',parseInt(srcEle.css('left')) + parseInt(srcEle.css('width')));
            $('#tmpLine').attr('y1',parseInt(srcEle.css('top')) + 0.5 * parseInt(srcEle.css('height')));

            $('#tmpLine').attr('x2',e.pageX);
            $('#tmpLine').attr('y2',e.pageY - 72);//top的高度

            startEleId = $(ele).parents('.singleEle').attr('id');
        };

    }

    function endLink(ele){
        if(startEleId != "" && startEleId != $(ele).parents('.singleEle').attr('id')) {

            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/index/addMapLink",
                data: {
                    toolId: '<?php echo htmlentities($toolId); ?>',
                    srcId:startEleId.split('_')[1],
                    tarId:$(ele).parents('.singleEle').attr('id').split('_')[1]
                },
                success: function (result) {
                    var tmpId = "line_" + startEleId.split('_')[1] + "_" + $(ele).parents('.singleEle').attr('id').split('_')[1];

                    var newLink = $('#tmpLine').clone();


                    $('#tmpLine').attr('x1', 0);
                    $('#tmpLine').attr('y1', 0);

                    $('#tmpLine').attr('x2', 0);
                    $('#tmpLine').attr('y2', 0);

                    startEleId == "";

                    $('#blank_board').append(newLink);
                    $(newLink).attr('id', tmpId);
                }
            });
        }else {

            $('#tmpLine').attr('x1', 0);
            $('#tmpLine').attr('y1', 0);

            $('#tmpLine').attr('x2', 0);
            $('#tmpLine').attr('y2', 0);

            startEleId == "";

        }
        //$('#blank_board').append('<line id="' + tmpId + '" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" />');
    }

    function moveLine( lineId ,srcEle ,tarEle ) {
        if(srcEle != "") {
            $('#' + lineId).attr('x1', parseInt($('#' + srcEle).css('left')) + parseInt($('#' + srcEle).css('width')));
            $('#' + lineId).attr('y1', parseInt($('#' + srcEle).css('top')) + 0.5 * parseInt($('#' + srcEle).css('height')));
        }

        if(tarEle != "") {
            $('#' + lineId).attr('x2', parseInt($('#' + tarEle).css('left')));
            $('#' + lineId).attr('y2', parseInt($('#' + tarEle).css('top')) + 0.5 * parseInt($('#' + tarEle).css('height')));
        }
    }


    var tmpLines = '<?php echo json_encode($links); ?>';
    //console.log(tmpLines);
    JSON.parse(tmpLines).forEach(function (line) {
        moveLine("line_" + line.src_id + "_" +line.tar_id,"node_" + line.src_id,"node_" + line.tar_id);
    });


    //点击连线以外区域隐藏删除按钮
    $(document).click(function(e){
        var _con = $('.singleLine');   // 设置目标区域

        if(!_con.is(e.target) && _con.has(e.target).length === 0){
            $('#del_link').hide();
        }

        _con = $('.singleEle');   // 设置目标区域

        if(!_con.is(e.target) && _con.has(e.target).length === 0){
            $('#del_node').hide();
        }
    });



    function small_down(e,ele) {

        var obig = document.getElementById("big");
        var osmall = ele;

        var e = e || window.event;

        /*用于保存小的div拖拽前的坐标*/
        osmall.startX = e.clientX - osmall.offsetLeft;
        osmall.startY = e.clientY - osmall.offsetTop;

        /*鼠标的移动事件*/
        document.onmousemove = function (e) {

            var e = e || window.event;

            osmall.style.left = e.clientX - osmall.startX + "px";
            osmall.style.top = e.clientY - osmall.startY + "px";

            /*对于大的DIV四个边界的判断*/

            if (e.clientX - osmall.startX <= 0) {
                osmall.style.left = 0 + "px";
            }

            if (e.clientY - osmall.startY <= 0) {
                osmall.style.top = 0 + "px";
            }

            if (e.clientX - osmall.startX >= 1000) {
                osmall.style.left = 1000 + "px";
            }

            if (e.clientY - osmall.startY >= 500) {
                osmall.style.top = 500 + "px";
            }


            //连线随之移动
            var lines = $('#blank_board').children();

            for(var i=0; i < lines.length; i++){
                if($(lines[i]).attr('id').split('_').indexOf($(ele).attr('id').split('_')[1]) == 1){
                    moveLine($(lines[i]).attr('id'),$(ele).attr('id'),"");
                }else if($(lines[i]).attr('id').split('_').indexOf($(ele).attr('id').split('_')[1]) == 2){
                    moveLine($(lines[i]).attr('id'),"",$(ele).attr('id'));
                }
            }


            $('#del_node').hide();
        };

        /*鼠标的抬起事件,终止拖动*/
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        };

    }


    function editMapRecord(recordId, ele) {
        $.ajax({
            type: "POST",
            url: "http://localhost/tp5/public/index.php/index/index/editMapRecord",
            data: {
                recordId: recordId,
                contents:$(ele).val()
            },
            success: function (result) {

            }
        });
    }


    function editMapCoordinates() {
        var result = new Array();

        $('.singleEle').each(function (idx,node) {
            var nodeResult = new Object();
            nodeResult.id = $(node).attr('id').split('_')[1];
            nodeResult.left = parseInt($(node).css('left'));
            nodeResult.top = parseInt($(node).css('top'));

            result.push(nodeResult);
        });

        //console.log(result);

        $.ajax({
            type: "POST",
            url: "http://localhost/tp5/public/index.php/index/index/editMapCoordinates",
            data: {
                resultArr: result,
            },
            success: function (result) {
                toastr.info('布局已成功保存~');
                setTimeout(function () {
                    toastr.clear();
                }, 4000);
            }
        });

    }

    function delMapLink() {
        //console.log(delLinkId);

        $.ajax({
            type: "POST",
            url: "http://localhost/tp5/public/index.php/index/index/delMapLink",
            data: {
                srcId: delLinkId.split('_')[1],
                tarId:delLinkId.split('_')[2]
            },
            success: function (result) {

                $('#' + delLinkId).remove();
                delLinkId = "";
            }
        });
    }

    function delMapNode() {
        //console.log(delNodeId);
        var nodeId = delNodeId.split('_')[1];

        $.ajax({
            type: "POST",
            url: "http://localhost/tp5/public/index.php/index/index/delMapNode",
            data: {
                nodeId: nodeId
            },
            success: function (result) {

                $('#' + delNodeId).remove();
                delNodeId = "";

                $('.singleLine').each(function (idx,line) {
                    var srcId = $(line).attr('id').split('_')[1];
                    var tarId = $(line).attr('id').split('_')[2];

                    if(nodeId == srcId || nodeId == tarId){
                        $(line).remove();
                    }
                });
            }
        });
    }
</script>

 <head>
    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/float_window.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/tools.css" />
    <link href="http://localhost/tp5/public/CSS/toastr.css" rel="stylesheet" />
    <script src="http://localhost/tp5/public/JS/toastr.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/bootcssButtons.css" />


    <script>
        function sendFeedback(userId) {
            var feedbackInfo = $('#feedbackInfo').val();
            var re = new RegExp("^[ ]+$");

            if (!re.test(feedbackInfo) && feedbackInfo != "" && feedbackInfo != null) {

                $.post("http://localhost/tp5/public/index.php/index/index/addFeedback", {
                    feedbackInfo: $('#feedbackInfo').val(),
                    userId: userId
                }, function() {
                    //显示一个信息没有标题
                    toastr.success('反馈已成功发送，感谢使用~');
                    setTimeout(function() {
                        toastr.clear();
                    }, 2000);
                });
            } else {
                toastr.error('反馈不能为空~');
                setTimeout(function() {
                    toastr.clear();
                }, 2000);
            }
        }

        function showFeedback() {
            $('#showdiv_F').show(); //显示弹窗
            $('#cover_F').css('display', 'block'); //显示遮罩层
            $('#cover_F').css('height', '100%'); //设置遮罩层的高度为当前页面高度
        }

        // 关闭弹窗
        function closeFeedback() {
            $('#showdiv_F').hide(); //隐藏弹窗
            $('#cover_F').css('display', 'none'); //隐藏遮罩层
        }
    </script>
</head>

<body>

    <!--<div style="height:1000px;"></div>-->

    <div class="guide">
        <div class="guide-wrap">
            <!--<a href="#" class="edit" title="发新帖"><span>发新帖</span></a>
        <a href="#" class="find" title="找论坛"><span>找论坛</span></a>-->
            <?php if(isset($_COOKIE['user'])): ?>
            <a href="javascript:showFeedback()" class="report" title="反馈"><span>反馈</span></a> <?php endif; ?>
            <a href="javascript:window.scrollTo(0,0)" class="top" title="回顶部"><span>回顶部</span></a>
        </div>
    </div>



    <?php if(isset($_COOKIE['user'])): ?>

    <!--以下为添加反馈时的弹窗相关-->
    <!-- 遮罩层 -->
    <div id="cover_F" class="cover"></div>
    <!-- 弹窗 -->
    <div id="showdiv_F" class="showdiv" style="height: 250px;">
        <!-- 标题 -->
        <div class="showdiv_title">
            意见和反馈
        </div>
        <!-- 内容 -->
        <div class="showdiv_prompt">
            请留下您的宝贵意见或反馈：

            <div>
                <textarea required id="feedbackInfo" style="height: 100px;width: 400px;margin-top: 20px;"></textarea>
            </div>
        </div>

        <!-- 按钮 -->
        <div class="button button-medium " onclick="closeFeedback()" style="position: absolute;left: 25%;top: 80%;">
            取消</div>
        <div id="next_step_btn" onclick="sendFeedback('<?php echo htmlentities($_COOKIE['user']); ?>')" class="button button-action button-medium" style="position:absolute;left: 50%;top: 80%;">
            发送</div>

    </div>

    <?php endif; ?>

</body>

    </div>
    <div class="footer">
        <style>
    a {
        text-decoration: none;
        color: #aaabab;
        text-decoration: none;
    }
    
    a:hover {
        color: #647BFF;
        text-decoration: none;
    }
</style>

<div style="font-size:18px;background-color: #f9f9f9;color:#aaabab;width:100%;/*padding: 20px 0;*/text-align: center;">
    Copyright © <a href="http://localhost/tp5/public/index.php">火花设计思维分享</a> 京ICP备19028873号-1
</div>
    </div>
</div>



<script>
    // 此处应修改，不能直接操作innerHTML，不然echarts绘图空白
    // var s = document.body.innerHTML;
    // s = s.replace(/商业/g, '产业');
    // document.body.innerHTML = s;
</script>


<style>
    * {
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    
    .my_container {
        min-height: 600px;
        padding-bottom: -25px;
        min-width: 925px;
    }
    
    .my_container::after {
        content: "";
        clear: both;
        display: block;
    }
    
    .footer {
        height: 25px;
        min-width: 925px;
    }
    
    button {
        margin-left: 10px;
        border-radius: 20px;
        padding: 12px 23px;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid #dcdfe6;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        font-size: 14px;
        font-family: inherit;
        -webkit-writing-mode: horizontal-tb;
        text-rendering: auto;
    }
    
    button:hover {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #fff;
    }
</style>